<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:54:06
 * @LastEditors: delin66
 * @LastEditTime: 2025-04-12 14:22:12
 * @Descripttion: 
-->
<template>
  <div class="container">
      <el-menu class="nav"
        :default-active="activeIndex"
        mode="vertical"
        background-color="#194E87"
        text-color="#e6f7ff"
        active-text-color="#ffffff"
        router
      >
        <template v-for="(item, index) in navList">
          <el-menu-item
            :index="item.path"
            style="font-size: 16px; font-weight: bold"
            :class="item.path == activeIndex ? 'active' : '' "
          >{{ item.title }}</el-menu-item>
        </template>
      </el-menu>

    <router-view  class="content"></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { useRoute ,useRouter} from 'vue-router';

const route = useRoute();
const router = useRouter();
const activeIndex = ref<string>('/enter-park');

const navList = ref([
  // { title: '入园条件', path: '/park-service/park-enter-step/enter-park' },
  { title: '科技园入园条件', path: '/park-service/park-enter-step/park-condition-kjy' },
  { title: '科技园入园流程', path: '/park-service/park-enter-step/park-condition-step' },
  { title: '众创空间入园条件', path: '/park-service/park-enter-step/park-condition' },
  { title: '众创空间入园流程', path: '/park-service/park-enter-step/park-step' },
]);

const handleSelect = (key: string, keyPath: string[]) => {
  router.push(key);
};

// 控制nav是否显示

const curPath = computed(() => {
  return route.path;
});
watch(
  curPath,
  () => {
    // 正确显示当前显示的nav
    activeIndex.value = route.path;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
  min-height: calc(100vh - 60px); // 假设顶部导航栏高度为60px，根据实际情况调整
}

.active{
  background-color: #003B7A !important;
}

.nav {
  //background-color: #545c64;
  flex-shrink: 0; // 防止侧边栏收缩
  width: 300px; // 固定宽度，可根据需要调整

  //.el-menu-item.is-active {
  //  border-left: 4px solid #ffd04b;
  //}
}

.content {
  flex: 1; // 内容区域占据剩余空间
}
</style>
